<!--
/*
 * Copyright (C) 2021 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
-->
<div class="card">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Step Details</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <table class="mat-elevation-z8">
        <tbody>
          <div *ngFor="let row of steps">
            <tr>
              <td class="kind">{{ row.kind }}</td>
            </tr>
            <div *ngFor="let detail of row.substeps">
              <tr class="substep">
                <td>{{ detail }}</td>
                <td></td>
              </tr>
            </div>
          </div>
        </tbody>
      </table>
    </mat-card-content>
  </mat-card>
</div>
